$(function () {
  // console.log(11);
  // 初始化裁剪
  const $image = $("#image");
  $image.cropper({
    aspectRatio: 1,
    preview: ".img-preview",
  });

  // 注册点击事件
  $("#btnChooseImage").on("click", function () {
    $("#file").click();
  });

  // 给文件注册change事件
  // 判断文件是否已经选择
  // 如果选择了文件，获取这个图片
  // 修改图的路径位base64形式
  $("#file").on("change", function () {
    const fliesList = this.files;
    if (fliesList.length === 0) return alert("请选择图片");
    const fileInfo = fliesList[0];
    // 转换路径
    const url = URL.createObjectURL(fileInfo);
    // 销毁裁剪框
    $image.cropper("destroy");
    $image.attr("src", url);
    // 初始化裁剪框
    $image.cropper({
      aspectRatio: 1,
      preview: ".img-preview",
    });
  });

  // 点击确定
  // 给确定按钮注册点击事件
  // 获取上传的图片
  // 发起ajax请求
  $("#btnUpload").on("click", function () {
    const result = $image
      .cropper("getCroppedCanvas", {
        width: 100,
        height: 100,
      })
      .toDataURL();
    $.ajax({
      method: "post",
      url: "/my/update/avatar",
      data: {
        avatar: result,
      },
      success: function (res) {
        console.log(res);
        if (res.status !== 0) return layer.msg(res.message, { icon: 5 });
        layer.msg(res.message, { icon: 6 });
        window.parent.render();
      },
    });
  });
});
